<template>
	<view class="noPunchCard">
		<template v-if="list.length ===0">
			<view>
				<notFoundData />
			</view>
		</template>
		<template v-else>
			<template v-for="(item,index) in list">
				<uni-card @click="toDetail(item,index)" :sub-title="item.date || ''" :key="item.worker_id"
					:title="item.name">
					<text class="uni-body">未打卡</text>
				</uni-card>
			</template>
		</template>
	</view>
</template>
<script>
	import notFoundData from '@/components/notFoundData/index.vue'
	export default {
		props: {
			noPunchCard: {
				type: Array,
				default () {
					return []
				}
			}
		},
		components: {
			notFoundData
		},
		data() {
			return {
				list: [],
				currentItem: null,
				index: null
			}
		},
		methods: {
			reloadPage(index) {
				this.list.splice(index, 1)
			},
			toDetail(item, index) {
				this.currentItem = item
				this.index = index
				this.$nextTick(() => {
					uni.navigateTo({
						url: "/pages/record/admin/nopunch_detail",
					});
				})
			},
			competionMsgSend() {
				this.$eventBus.$emit('nopunch_detail', this.currentItem, this.index)
				this.index = null
				this.currentItem = null
			}
		},
		watch: {
			noPunchCard: {
				handler(newValue, oldValue) {
					this.list = newValue
				},
				deep: true // 深度监听父组件传过来对象变化
			},
		},
		created() {
			this.$eventBus.$on('nopunch', () => {
				this.competionMsgSend()
			})
			this.list = this.noPunchCard
		}
	}
</script>

<style scoped lang="less">
	.noPunchCard {
		background-color: #fdfdfd;
		height: auto;
		min-height: 100%;
		padding-bottom: 20rpx;

		.clockItem {
			padding: 25rpx 35rpx;
		}

		.right {
			display: flex;
			padding: 0 25rpx;

			.rightBox {
				flex: 1;
				margin: 0 10rpx;
			}

		}

		.card {
			padding: 10rpx 20rpx;

			.header {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.day {
					font-size: 25rpx;
					color: #929499;
				}

				.name {
					font-size: 35rpx;
					font-weight: 500;
					color: #3d3d43;
				}
			}

			.body {
				color: #929499;
				font-size: 25rpx;
				display: flex;
				justify-content: space-between;


			}
		}
	}
</style>
